$(function() {
    showpictorial()
    showPie1()
    showPie2()
    showBar1()
    showPieBar()
    $('#nav-list').on('click', 'a', function() {
        $(this).toggleClass('icon_turnoff')

    })
})

function showpictorial() {
    var myChart = echarts.init(document.getElementById("pictorial"));

    var option = {
        grid: {
            top: '10%',
            left: '90',
            right: '5%',
            bottom: '13%',
            // containLabel: true
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'none'
            },
            formatter: function(params) {
                return params[0].name + ': ' + params[0].value;
            }
        },
        xAxis: {
            splitLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            axisLine: {
                show: false
            },
            axisLabel: {
                show: true,
                margin: 26,
                textStyle: {
                    color: '#97B8C9'
                }
            }

        },
        yAxis: {
            data: [
                '应急管理',
                '职业健康',
                '个体防护装备',
                '重大危险源管理',
                '相关方面管理',
                '安全投入',
                '安全教育培训',
                '安全规章制度',
                '安全生产管理机构及人员',
                '资质证照'
            ],
            axisTick: {
                show: false
            },
            axisLine: {
                show: false
            },
            axisLabel: {
                textStyle: {
                    color: '#97B8C9',
                    fontSize: 12

                },
                formatter: function(v) {
                    var text = v
                    return text.length < 6
                        ? text
                        : text.slice(0, 6) + '\n' + text.slice(6)

                    //  `${text.slice(0, 4)}\n${text.slice(4)}`
                }
            }

        },
        color: ['#e54035'],
        series: [
            {
                name: 'hill',
                type: 'pictorialBar',
                barCategoryGap: '-130%',
                symbol: 'path://M574,285.5 C299.333333,285.5 162,321.333333 162,393 L162,177 C162,248.753807 299.333333,284.920474 574,285.5 Z',
                //  symbol: 'path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z',
                itemStyle: {
                    normal: {
                        color: '#4BCEEC',
                        opacity: 0.8
                    },
                    emphasis: {
                        opacity: 1
                    }
                },
                data: [
                    123,
                    60,
                    25,
                    18,
                    12,
                    11,
                    10,
                    9,
                    2,
                    1
                ],
                z: 10
            }

        ]
    };

    myChart.setOption(option);
}
function showPie1() {
    var myChart = echarts.init(document.getElementById("pie1"));
    var option = {
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b}: {c} ({d}%)"
        },
        legend: {
            orient: 'vertical',
            bottom: '5px',
            left: '6%',
            top: '30%',
            itemWidth: 14,
            itemHeight: 8,
            textStyle: {
                color: '#97B8C9',
                fontSize: 12
            },

            data: ['一级', '二级', '三级', '未定级']
        },
        // tooltip: {
        //     formatter: '{b} {d}%'
        // },
        color: [
            '#3157EC', '#00A77B', '#F1951F', '#9C9C9C'
        ],
        series: [
            {
                name: '危化企业标准化占比情况',
                type: 'pie',
                // minAngle: 10,

                radius: [
                    '26%', '50%'
                ],
                center: [
                    '62%', '53%'
                ],
                // avoidLabelOverlap: false,

                label: {
                    normal: {
                        formatter: '{b} \n {d}%',
                        show: true,
                        textStyle: {
                            fontSize: '12',
                            color: '#97B8C9'
                        }

                    },
                    emphasis: {
                        show: true,
                        textStyle: {
                            fontSize: '14',
                            fontWeight: 'bold'
                        }
                    }
                },
                labelLine: {
                    normal: {
                        show: true
                    }
                },
                data: [
                    {
                        value: 335,
                        name: '一级'
                    }, {
                        value: 0,
                        name: '二级'
                    }, {
                        value: 0,
                        name: '三级'
                    }, {
                        value: 135,
                        name: '未定级'
                    }
                ]
            }
        ]
    };

    myChart.setOption(option);

}

function showPie2() {
    var myChart = echarts.init(document.getElementById("pie2"));
    var option = {
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b}: {c} ({d}%)"
        },
        // legend: {
        //     orient: 'vertical',
        //     bottom: '5px',
        //     left: '6%',
        //     top: '30%',
        //     itemWidth: 14,
        //     itemHeight: 8,
        //     textStyle: {
        //         color: '#97B8C9',
        //         fontSize: 12
        //     },
        //
        //     data: ['一级', '二级', '三级', '未定级']
        // },
        // tooltip: {
        //     formatter: '{b} {d}%'
        // },
        color: [
            '#ED302E',
            '#F5A623',
            '#7630ED',
            '#0288D1',
            '#4BCEEC',
            '#4CAF50'
        ],
        series: [
            {
                name: '危化企业占比情况',
                type: 'pie',
                // minAngle: 10,

                radius: [
                    '26%', '50%'
                ],
                center: [
                    '50%', '68%'
                ],
                // avoidLabelOverlap: false,

                label: {
                    normal: {
                        formatter: '{b} \n {d}%',
                        show: true,
                        textStyle: {
                            fontSize: '12',
                            color: '#97B8C9'
                        }

                    },
                    emphasis: {
                        show: true,
                        textStyle: {
                            fontSize: '14',
                            fontWeight: 'bold'
                        }
                    }
                },
                labelLine: {
                    normal: {
                        show: true
                    }
                },
                data: [
                    {
                        value: 335,
                        name: '危化品生产 '
                    }, {
                        value: 0,
                        name: '危化品经营'
                    }, {
                        value: 0,
                        name: '危化品存储'
                    }, {
                        value: 135,
                        name: '危化品使用 '
                    }, {
                        value: 335,
                        name: '易制毒危化品 '
                    }, {
                        value: 335,
                        name: '易制爆危化品 '
                    }
                ]
            }
        ]
    };

    myChart.setOption(option);

}

function showPieBar() {
    var myChart = echarts.init(document.getElementById("pie-bar"));
    var option = {
        tooltip: {},
        grid: {
            top: '10%',
            left: '63%',
            right: '5%',
            bottom: '3%',
            // containLabel: true
        },
        legend: {
            orient: 'vertical',
            bottom: '5px',
            left: '2%',
            top: '20%',
            itemGap: 2,
            itemWidth: 14,
            itemHeight: 8,
            textStyle: {
                color: '#97B8C9',
                fontSize: 12
            },

            data: [
                '物体打击',
                '车辆伤害',
                '机械伤害',
                '起重伤害',
                '触电',
                '淹溺',
                '灼烫',
                '火灾',
                '高处坠落',
                '瓦斯爆炸',
                '锅炉爆炸',
                '容器爆炸',
                '其他爆炸'
            ]
        },
        yAxis: [
            {
                type: 'category',
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: '#1178C9'
                    }
                },
                axisLabel: {
                    interval: 0,
                    textStyle: {
                        color: '#97B8C9'

                    }
                    // formatter: function(params) {
                    //     if (params.length > 7) {
                    //         return params.substring(0, 7) + '\n' + params.substring(7, params.length)
                    //     }
                    //     return params
                    // }

                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: '#07274D'
                    }
                },
                axisTick: {
                    lineStyle: {
                        color: '#1178C9'
                    }
                },
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: '#07274D'
                    }
                },
                data: [
                    '其他',
                    '对现场工作缺乏检查或智慧错误',
                    '劳动组织不合理',
                    '生产场所环境不良存在事故隐患',
                    '设备设施共计附件有缺陷',
                    '技术和设计有缺陷',
                    '教育培训不够缺乏安全操作知识',
                    '违反操作规程或劳动纪律',
                    '没有安全操作规程或不健全',
                    '个人防护用品缺少或有缺陷',
                    '安全设施缺少或有缺陷'
                ],
                // axisTick: {
                //     alignWithLabel: true
                // }
            }

        ],
        xAxis: [
            {
                type: 'value',
                interval: 0,
                splitLine: {
                    lineStyle: {
                        color: '#07274D'
                    }
                },
                axisLine: {
                    lineStyle: {
                        color: '#07274D'
                    }
                },
                axisTick: {
                    lineStyle: {
                        color: '#1178C9'
                    }
                },
                axisLabel: {
                    textStyle: {
                        color: '#97B8C9'

                    },
                    formatter: '{value} '
                }
            }

        ],
        color: [
            '#EB4832',
            '#1178C9',
            '#4CAF50',
            '#8B572A',
            '#F8E71C',
            '#73BCF0',
            '#DC1F7A',
            '#EB3432',
            '#F5A623',
            '#7ED321',
            '#5A3D23',
            '#563491',
            '#B09A75'
        ],
        series: [
            {
                name: '危化行业事故分析',
                type: 'bar',
                label: {
                    normal: {
                        show: true,
                        color: '#fff',
                        position: 'right'
                    }
                },
                itemStyle: {
                    normal: {
                        color: '#3157EC'
                    }
                },

                data: [
                    10,
                    52,
                    20,
                    334,
                    220,
                    10,
                    52,
                    20,
                    334,
                    220,
                    23
                ]

            }, {
                name: '危化行业事故分析',
                center: [
                    '26%', '50%'
                ],
                radius: [
                    '20%', '50%'
                ],
                type: 'pie',
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b}: {c} ({d}%)"
                },
                label: {
                    normal: {
                        show: true,
                        color: '#fff',
                        position: 'inside',
                        formatter: ' {d}%'
                    }
                },

                data: [
                    {
                        value: 335,
                        name: '物体打击'
                    }, {
                        value: 0,
                        name: '车辆伤害'
                    }, {
                        value: 0,
                        name: '机械伤害'
                    }, {
                        value: 135,
                        name: '起重伤害'
                    }, {
                        value: 335,
                        name: '触电'
                    }, {
                        value: 0,
                        name: '淹溺'
                    }, {
                        value: 0,
                        name: '灼烫'
                    }, {
                        value: 135,
                        name: '火灾'
                    }, {
                        value: 335,
                        name: '高处坠落'
                    }, {
                        value: 0,
                        name: '瓦斯爆炸'
                    }, {
                        value: 0,
                        name: '锅炉爆炸'
                    }, {
                        value: 135,
                        name: '容器爆炸'
                    }, {
                        value: 135,
                        name: '其他爆炸'
                    }
                ]

            }
        ]
    }

    myChart.setOption(option);

}

function showBar1() {
    var myChart = echarts.init(document.getElementById("bar1"));
    var option = {
        legend: {
            top: '10%',
            right: '2%',
            itemWidth: 14,
            itemHeight: 8,
            data: [
                '危化品从业资格证', '特种作业操作证', '剧毒化学品从业人员上岗资格证'
            ],
            textStyle: {
                color: '#97B8C9',
                fontSize: 12
            }
        },
        tooltip: {
            trigger: 'axis'
        },
        grid: {
            top: '35%',
            left: '6%',
            right: '6%',
            bottom: '10%',
            containLabel: true
        },
        color: [
            '#ED302E', '#F5A623', '#7630ED'
        ],
        xAxis: {
            type: 'category',

            // boundaryGap: false,

            axisLine: {

                show: false,

                lineStyle: {
                    color: '#1178C9'
                }
            },
            axisLabel: {
                show: true,
                interval: 0,
                // rotate: -45,
                textStyle: {
                    color: '#97B8C9'

                }

            },
            axisLine: {
                show: true,
                lineStyle: {
                    color: '#07274D'
                }
            },
            axisTick: {
                show: true,
                lineStyle: {
                    color: '#1178C9'
                }
            },
            splitLine: {
                show: true,
                lineStyle: {
                    color: '#07274D'
                }
            },
            data: [
                '杭州市',
                '宁波市',
                '温州市',
                '嘉兴市',
                '湖州市',
                '绍兴市',
                '金华市',
                '衢州市',
                '舟山市',
                '台州市',
                '丽水市'

            ]
        },
        yAxis: [

            {
                type: 'value',

                splitLine: {
                    show: true,
                    lineStyle: {
                        color: '#07274D'
                    }
                },
                axisLine: {
                    show: true,

                    lineStyle: {
                        color: '#07274D'
                    }
                },
                axisTick: {
                    show: true,
                    lineStyle: {
                        color: '#1178C9'
                    }
                },
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: '#97B8C9'

                    },
                    formatter: '{value} '
                }
            }
        ],
        series: [
            {
                name: '危化品从业资格证',
                type: 'bar',

                stack: 0,

                itemStyle: {
                    normal: {
                        barBorderRadius: 3
                    }
                },
                data: [
                    1,
                    22,
                    2,
                    5,
                    3,
                    22,
                    2,
                    5,
                    3,
                    32,
                    4

                ]

            }, {
                name: '特种作业操作证',
                type: 'bar',
                stack: 1,
                itemStyle: {
                    normal: {
                        barBorderRadius: 3
                    }
                },

                data: [
                    1,
                    22,
                    2,
                    5,
                    3,
                    22,
                    2,
                    5,
                    23,
                    23,
                    4

                ]

            }, {
                name: '剧毒化学品从业人员上岗资格证',
                type: 'bar',
                stack: 3,
                itemStyle: {
                    normal: {
                        barBorderRadius: 3
                    }
                },
                data: [
                    1,
                    22,
                    2,
                    5,
                    3,
                    22,
                    2,
                    5,
                    32,
                    6,
                    78

                ]

            }
        ]
    };

    myChart.setOption(option);

}
